<%--
  Created by IntelliJ IDEA.
  User: Somnus远哥
  Date: 2021/9/27
  Time: 9:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>类别列表</title>
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <link rel="stylesheet" href="../css/bootstrap-responsive.css" />
    <link rel="stylesheet" href="../css/styles.css" />
    <link rel="stylesheet" href="../css/toastr.css" />
    <link rel="stylesheet" href="../css/fullcalendar.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/jquery.knob.js"></script>
    <script src="../js/jquery.sparkline.min.js"></script>
    <script src="../js/toastr.js"></script>
    <script src="../js/jquery.tablesorter.min.js"></script>
    <script src="../js/jquery.peity.min.js"></script>
    <script src="../js/fullcalendar.min.js"></script>
    <script src="../js/gcal.js"></script>
    <script src="../js/setup.js"></script>
    <style>
        .cdWidth{
            width: 300px;
        }
    </style>
    <script>
        $(function(){
            $.ajax({
                url:"list",
                /*dataType:"json",
                async:true,*/
                success(categories){
                    console.log(categories)
                    findAll(categories);
                }
            })
            function findAll(categories){
                for(let i=0;i<categories.length;i++){

                    let c = categories[i];
                    let str = "";
                    if(c.grade == 1){
                        str += "";
                    }else if(c.grade == 2){
                        str += "----";
                    }else {
                        str += "--------";
                    }
                    let tr = "<tr>\n" +
                        "                            <td>"+c.id+"</td>\n" +
                        "                            <td>"+ str + c.name+"</td>\n" +
                        "                            <td  class=\"cdWidth\">"+c.descr+"</td>\n" +
                        "                            <td>"+c.pid+"</td>\n" +
                        "                            <td>"+c.leaf+"</td>\n" +
                        "                            <td>"+c.grade+"</td>\n" +
                        "                            <td>\n" +
                        "                                <div class=\"btn-group\">\n" +
                        "                                    <button class=\"btn\">操作</button>\n" +
                        "                                    <button data-toggle=\"dropdown\" class=\"btn dropdown-toggle\">\n" +
                        "                                        <span class=\"caret\"></span>\n" +
                        "                                    </button>\n" +
                        "                                    <ul class=\"dropdown-menu\">\n" +
                        "                                        <li>\n" +
                        "                                            <a href=\"insertChildLoad?id="+c.id+"\">添加子类别</a>\n" +
                        "                                            <a href=\"#\">修改</a>\n" +
                        "                                            <a href=\"#\">删除</a>\n" +
                        "                                        </li>\n" +
                        "                                    </ul>\n" +
                        "                                </div>\n" +
                        "                            </td>\n" +
                        "                        </tr>"
                    // 判断是直接输出tr 还是递归输出
                    if(!c.leaf){
                        // 不是叶子节点的那一条也要添加的tbody中
                        $(tr).appendTo("#list")
                        // 递归
                        findAll(c.children)
                    }else{
                        // 不执行递归，直接输出
                        $(tr).appendTo("#list")
                    }
                }
            }
        })
    </script>

</head>
<body>
<!-- header部分 -->
<%@include file="../header.jsp"%>
<div class="page">
    <div class="page-container">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <a href="#newUserModal" data-toggle="modal" class="btn pull-right">添加根类别</a>
                    <h4 class="header">类别列表</h4>
                    <table class="table table-striped sortable">
                        <thead>
                        <tr>
                            <th>类别ID</th>
                            <th>类别名称</th>
                            <th class="cdWidth">类别描述</th>
                            <th>上一级类别ID</th>
                            <th>是否是叶子节点</th>
                            <th>级别</th>
                        </tr>
                        </thead>
                        <tbody id="list"></tbody>
                    </table>
                    <div class="pagination pagination-centered">
                        <ul>
                            <li class="disabled"><a href="#">&laquo;</a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="newUserModal" class="modal hide fade">
            <div class="modal-header">
                <button type="button" data-dismiss="modal" aria-hidden="true"
                        class="close">&times;</button>
                <h3>添加根类别</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="insertRootCategory" method="post">
                    <div class="control-group">
                        <label for="inputEmail"  class="control-label">类别名称</label>
                        <div class="controls">
                            <input id="inputEmail" name="name" type="text" placeholder="请输根类别" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">类别描述
                        </label>
                        <div class="controls">
                            <textarea rows="5" cols="20" name="descr"></textarea>
                        </div>
                    </div>


                    <div class="modal-footer">
                        <a href="#" data-dismiss="modal" class="btn">关闭</a>
                        <input type="submit" class="btn btn-primary"
                            value="添加" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<%@include file="../footer.jsp"%>
</body>
<script src="../js/d3-setup.js"></script>

</html>
